<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<title>Demo 1: Slider</title>
	<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
	<style type="text/css">
	/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */

	#sliderContainer{
		width:300px;
		margin:0 auto;
		margin-top:10px;
		padding:3px;
		float:left;
	}
	
	#treeDiv{
		width:300px;
		float:left;
	}

	#valueOfRedSlider,#valueOfGreenSlider,#valueOfBlueSlider{
		width:50px;
		float:left;
	}
	#redSlider,#greenSlider,#blueSlider{
		width:200px;
		height:20px;
		float:left;
		margin-right:5px;
	
	}
	#sliderInputDiv{
		width:30px;
		height:20px;
	}
	
	.clear{
		clear:both;

	}

	
	.ver_slider{
		height:230px;
		width:30px;
		float:left;
	}
	#ver_slide1,#ver_slide2,#ver_slide3{
		width:30px;
		height:200px;
		margin-bottom:3px;
	}
	</style>	
	<script type="text/javascript" src="../js/dhtml-suite-for-applications.js"></script>
</head>
<body>
	<div id="header">
		<img src="../images/logo.png">
	</div>	
	<div id="treeDiv">
	<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">
		<li id="node10000" noDrag="true" noSiblings="true"><a href="#">Root node</a>
			<ul>
				<li id="node1"><a href="#">Europe</a>
					<ul>
						<li id="node2"><a href="#">Norway</a>
							<ul>
								<li id="node3"><a href="#">Stavanger</a></li>
								<li id="node6"><a href="#">Bergen</a></li>
								<li id="node7"><a href="#">Oslo</a></li>
							</ul>
						</li>
						<li id="node8"><a href="#">United Kingdom</a>
							<ul>
								<li id="node9"><a href="#">London</a></li>
								<li id="node10"><a href="#">Manchester</a></li>
							</ul>				
						</li>
						<li id="node12"><a href="#">Sweden</a></li>
						<li id="node13"><a href="#">Denmark</a></li>
						<li id="node14"><a href="#">Germany</a>
							<ul>
								<li id="node141"><a href="#">Berlin</a>	
								<li id="node142"><a href="#">Munich</a>	
								<li id="node143"><a href="#">Stuttgart</a>	
							</ul>
						</li>
					</ul>
				</li>
				<li id="node15"><a href="#">Asia</a>
					<ul>
						<li id="node151"><a href="#">Japan</a>	
						<li id="node152"><a href="#">China</a>	
						<li id="node153"><a href="#">Indonesia</a>			
					</ul>
				</li>
				<li id="node16"><a href="#">Africa</a>
					<ul>
						<li id="node17"><a href="#">Tanzania</a></li>
						<li id="node18"><a href="#">Kenya</a></li>
					</ul>
				</li>
				<li id="node19"><a href="#">America</a>
					<ul>
						<li id="node20"><a href="#">Canada</a></li>
						<li id="node21"><a href="#">United States</a></li>
						<li id="node22"><a href="#">Mexico</a></li>
						<li id="node23"><a href="#">Argentina</a></li>
					</ul>		
				</li>	
				<li id="node24" noChildren="true"><a href="#">Cannot have children</a></li>
				<li id="node25" noDrag="true"><a href="#">Cannot be dragged</a></li>
			</ul>
		</li>
	</ul>
	<form>
	<input type="button" onclick="alert(treeObj.getSaveString())" value="Save">
	</Form>	
	</div>

	<script type="text/javascript">	
	treeObj = new DHTMLSuite.JSDragDropTree();
	treeObj.setTreeId('dhtmlgoodies_tree2');
	treeObj.setMaximumDepth(7);
	treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
	treeObj.init();
	treeObj.expandAll();
	</script>
	
	
	<div id="sliderContainer">
		<form name="sliderForm">
		<!-- Start horizontal sliders -->
		<div id="redSlider"></div>
		<div id="valueOfRedSlider" class="sliderInputDiv"><input type="text" size="3" name="red" value="30" onchange="setSliderValue('red',this.value)"></div>
		
		<div class="clear"></div>
		
		<div id="greenSlider"></div>
		<div id="valueOfGreenSlider" class="sliderInputDiv"><input type="text" size="3" name="green" value="0" onchange="setSliderValue('green',this.value)"></div>
		
		<div class="clear"></div>
		
		<div id="blueSlider"></div>
		<div id="valueOfBlueSlider" class="sliderInputDiv"><input type="text" size="3" name="blue" value="30" onchange="setSliderValue('blue',this.value)"></div>
		
		<div class="clear"></div>	
		<br>
		<!-- Start vertical sliders -->
		<div class="ver_slider">
			<div id="ver_slide1"></div>
			<div id="val_slide1"><input type="text" name="ver_slide1" size="3" value="0"></div>
		</div>	
		<div class="ver_slider">
			<div id="ver_slide2"></div>
			<div id="val_slide2"><input type="text" name="ver_slide2" size="3" value="0"></div>
		</div>	
		<div class="ver_slider">
			<div id="ver_slide3"></div>
			<div id="val_slide3"><input type="text" name="ver_slide3" size="3" value="55"></div>
		</div>	

		
		<div class="clear"></div>
		</form>	
	</div>
	
<script type="text/javascript">

var colorObj = new DHTMLSuite.colorHelp();

function setFormFieldValue(value,nameOfSlider)
{
	document.forms['sliderForm'].elements[nameOfSlider].value = value;
}

function setSliderValue(whichEl,newValue)
{
	var el;
	switch(whichEl){
		case "red":
			el = sliderObj;
			break;
		case "green":
			el = sliderObj2;
			break;
		case "blue":
			el = sliderObj3;
			break;
	}	
	var formObj = document.forms['sliderForm'];
	
	document.body.style.backgroundColor = colorObj.getRgbFromNumbers(formObj.red.value,formObj.green.value,formObj.blue.value);
	self.status = colorObj.getRgbFromNumbers(formObj.red.value,formObj.green.value,formObj.blue.value)
	el.setSliderValue(newValue);
	
}

var sliderObj = new DHTMLSuite.slider();
sliderObj.setSliderTarget('redSlider');
sliderObj.setOnChangeEvent('setFormFieldValue');
sliderObj.setSliderName('red');
sliderObj.setInitialValue(30);
sliderObj.setSliderMaxValue(255);
sliderObj.setSliderReversed();
sliderObj.init();

var sliderObj2 = new DHTMLSuite.slider();
sliderObj2.setSliderTarget('greenSlider');
sliderObj2.setOnChangeEvent('setFormFieldValue');
sliderObj2.setSliderName('green');
sliderObj2.setInitialValue(30);
sliderObj2.setSliderMaxValue(255);
sliderObj2.init();

var sliderObj3 = new DHTMLSuite.slider();
sliderObj3.setSliderTarget('blueSlider');
sliderObj3.setSliderName('blue');
sliderObj3.setInitialValue(2);
sliderObj3.setSliderMaxValue(10);
sliderObj3.setOnChangeEvent('setFormFieldValue');
sliderObj3.init();

// Start code for vertical sliders

var sliderObj_v1 = new DHTMLSuite.slider();
sliderObj_v1.setSliderTarget('ver_slide1');
sliderObj_v1.setSliderName('ver_slide1');
sliderObj_v1.setSliderMaxValue(255);
sliderObj_v1.setSliderDirection('ver');
sliderObj_v1.setOnChangeEvent('setFormFieldValue');
sliderObj_v1.init();

var sliderObj_v2 = new DHTMLSuite.slider();
sliderObj_v2.setSliderTarget('ver_slide2');
sliderObj_v2.setSliderName('ver_slide2');
sliderObj_v2.setSliderMaxValue(255);
sliderObj_v2.setSliderDirection('ver');
sliderObj_v2.setOnChangeEvent('setFormFieldValue');
sliderObj_v2.init();

var sliderObj_v3 = new DHTMLSuite.slider();
sliderObj_v3.setSliderTarget('ver_slide3');
sliderObj_v3.setSliderName('ver_slide3');
sliderObj_v3.setSliderMaxValue(255);
sliderObj_v3.setInitialValue(55);
sliderObj_v3.setSliderReversed();
sliderObj_v3.setSliderDirection('ver');
sliderObj_v3.setOnChangeEvent('setFormFieldValue');
sliderObj_v3.init();



</script>


<div id="debug"></div>
</body>
</html>